<template>
	<view class="goshop-record-container">
		<view class="goshop-record-tabs">
			<u-tabs
			class="u-flex-middle"
			lineColor="#f56c6c"
			:activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}"
			:scrollable="false"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			:list="list" @click="click"></u-tabs>
		</view>
		<view class="goshop-record-list-wrap">
			<!-- 空白页 -->
			<u-empty v-if="isEmpty === true && walletDataList.length === 0" :text="emptyText" mode="list"></u-empty>
			<view class="goshop-record-list" v-for="(item,index) in walletDataList" :key="index" @tap="$Router.push({ path: '/pages/common/wallet/info', query: {  id: item.id}})">
				<view class="goshop-record-list-left">
					<view class="goshop-record-list-left-name">
						<view v-if="memberInfo.authStatus === 0" class="row-x">
							<view v-if="item.tradeType === 2">{{rechargeText}}：</view>
							<view v-else>{{buyText}}：</view>
						</view>
						<view v-else class="row-x">
							<view>{{orderText}}：</view>
						</view>
						<view>{{item.goodInfo.name}}</view>
					</view>
					<view class="goshop-record-list-left-content">{{item.createTime}}</view>
				</view>
				<view class="goshop-record-list-right">
					<view class="row-x">
						<view v-if="memberInfo.authStatus === 0" class="row-x">
							<view v-if="item.tradeType === 1">-</view>
							<view v-if="item.tradeType === 2">+</view>
							<view v-if="item.tradeType === 3">-</view>
						</view>
						<view v-else class="row-x">
								<view v-if="item.tradeType === 1">+</view>
								<view v-if="item.tradeType === 2">+</view>
								<view v-if="item.tradeType === 3">-</view>
						</view>
						{{item.payAmount}}
					</view>
					<view class="iconfont iconfont-right_arrow"></view>
				</view>
			</view>
		</view>
		<u-loadmore
				:status="loadStatus" 
				:loading-text="loadingText" 
				:loadmore-text="loadmoreText" 
				:nomore-text="nomoreText" 
				loadingIcon="semicircle"
				@loadmore="getWalletPage"
			/>
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	import {walletPage} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js'
	export default {
		data() {
			return {
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				walletDataList:[],
				emptyText:'',
				rechargeText:'',
				buyText:'',
				orderText:'',
				isLogin: false,
				list: [
					 {
						name: '',
						type: 0,
					}, {
						name: '',
						type: 2,
					}, {
						name: '',
						type: 3,
					}
				],
				params: {
					pageNo: 1,
					expendType:0,
					pageSize: 10,
				},
			};
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getWalletPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.walletDataList = []
			this.getWalletPage()
		},
		onLoad(){
			this.getWalletPage()	
		},
		async onShow(){
		  this.refresh();
		  this.isLogin ? await this.getMemberInfo() : this.resetMemberInfo();	
		},
		computed: {
			...mapGetters(['memberInfo'])
		},
		methods:{
			...mapActions(['getMemberInfo','resetMemberInfo']),
			refresh(){
				this.isLogin = jwt.getLogin();
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.rechargeText = this.$t('record.recharge.text');
				this.buyText = this.$t('record.buy.text');
				this.orderText = this.$t('record.order.text');
				this.list[0].name = this.$t('record.all.text');
				this.list[1].name = this.$t('record.income.text');
				this.list[2].name = this.$t('record.expenditure.text');
			},
			click(item) {
				 this.params.expendType = this.list[item.index].type;
				 this.params.pageNo = 1;
				 this.$nextTick(() => {
					this.getWalletPage();
				 })
			},
			getWalletPage(){
				this.loadStatus = 'loading';
				walletPage(this.params).then((res)=>{
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.walletDataList = this.walletDataList.concat(res.data.list);
					  } else {
						this.walletDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
		}
	}
</script>

<style lang="scss">
.goshop-record-container{
	display: flex;
	flex-direction: column;
	.goshop-record-tabs{
		position: fixed;
		width: 100%;
		background-color: $goshop-color-auxiliary-one;
	}
	.goshop-record-list-wrap{
		padding: 20rpx;
		margin-top: 30px;
		.goshop-record-list{
			border-radius: 10px;
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.goshop-record-list-left{
				flex: 3;
				.goshop-record-list-left-name{
					display: flex;
				}
				.goshop-record-list-left-content{
					margin-top: 10rpx;
					color: $goshop-text-color-three;
				}
			}
			.goshop-record-list-right{
				display: flex;
				align-items: center;
				justify-content: center;
				color: $goshop-text-color-three;
			}
		}
	}
}
</style>
